<template>
  <div
    class="flex items-center flex-row-reverse h-[40px] bg-[#232324] px-[30px]"
  >
    <div class="w-[200px] flex items-center">
      <el-tooltip
        effect="dark"
        :content="myLock ? '解锁当前缩放比例' : '锁定当前缩放比例'"
        placement="top"
      >
        <el-icon
          size="21"
          class="mr-[10px] cursor-pointer"
          color="#e9e9ea"
          @click="lockHandle"
          ><Lock v-if="myLock" /> <Unlock v-else
        /></el-icon>
      </el-tooltip>
      <el-slider
        :disabled="myLock"
        v-model="myScale"
        :show-tooltip="false"
        :step="0.05"
        :min="0.3"
        :max="2.5"
        @change="changegg"
      />
    </div>
    <!-- <div
      @click="showShortKey"
      class="mr-[30px] cursor-pointer w-[50px] rounded-md h-[30px] bg-[#FFFFFF14] flex items-center justify-center"
    >
      <el-tooltip effect="dark" content="查看快捷键列表" placement="top">
        <el-icon size="21" color="#e9e9ea"><Memo /></el-icon>
      </el-tooltip>
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
type PropsType = {
  scale: any;
  lockScale: boolean;
};
const changegg = () => {
  console.log(myScale.value);
};
let props = withDefaults(defineProps<PropsType>(), {
  scale: 1,
  lockScale: false,
});
let emit = defineEmits(["update:scale", "update:lockScale", "showShortKey"]);
let myScale = computed({
  get() {
    return props.scale;
  },
  set(value) {
    emit("update:scale", value);
  },
});
let myLock = computed({
  get() {
    return props.lockScale;
  },
  set(value) {
    emit("update:lockScale", value);
  },
});

const lockHandle = () => {
  myLock.value = !myLock.value;
};

const showShortKey = () => {
  emit("showShortKey", true);
};
</script>

<style scoped lang="scss">
:deep(.el-slider__button) {
  // background-color: var(--el-fill-color-blank);
  border-color: var(--el-border-color);
}
:deep(.el-slider__runway) {
  background-color: var(--contenct-color);
}
:deep(.el-slider__bar) {
  background-color: var(--active-color);
}
</style>
